<template>
	<view class="container">
		<!-- 赛事名称 -->
		<view class="section">
			<text class="section-title">赛事名称</text>
			<view class="remark-input">
				<textarea placeholder="请输入赛事名称" v-model="title" auto-height />
			</view>
		</view>

		<!-- 俱乐部名称 -->
		<view class="section">
			<text class="section-title">俱乐部名称</text>
			<view class="remark-input">
				<textarea placeholder="请输入俱乐部名称" v-model="club" auto-height />
			</view>
		</view>
		
		
		<view class="section">
			<text class="section-title">俱乐部图片</text>
			<view class="upload-area">
				<view v-for="(img, index) in imageUrls" :key="index" class="uploaded-image-container">
					<image :src="img" class="uploaded-image"></image>
					<view class="delete-icon" @click="removeImage(index)">×</view>
				</view>
		
				<view v-if="imageUrls.length < 2" class="upload-placeholder" @click="chooseImage">
					<image src="/static/fabu/xiangji.png" class="camera-icon"></image>
				</view>
			</view>
		
		</view>
		

		<!-- 预约时间 -->
		<view class="section">
			<text class="section-title">预约时间</text>
			<view class="time-picker">
				<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker">
						<text>{{date}}</text>
						<text class="arrow">></text>
					</view>
				</picker>
				<picker mode="time" @change="bindTimeChange">
					<view class="picker">
						<text>{{time}}</text>
						<text class="arrow">></text>
					</view>
				</picker>
			</view>
		</view>

		<!-- 地址信息 -->
		<view class="section">
			<text class="section-title">地址信息</text>
			<view class="address-picker" @click="goToAddressPicker">

				<view v-if="selectedAddress" class="address-info">
					<text class="address-text">{{selectedAddress.fullAddress}}</text>
					<view class="contact-info">
						<text>{{selectedAddress.contactName}}</text>
						<text>{{selectedAddress.phone}}</text>
					</view>
				</view>
				<view v-else class="placeholder">
					<text>请选择地址</text>
				</view>

			</view>
			<view class="address-detail">
				<input type="text" placeholder="详细地址" v-model="addressDetail" />
			</view>
		</view>

		<!-- 报名价格 -->
		<view class="section">
			<text class="section-title">报名费</text>
			<view class="remark-input">
				<textarea placeholder="请输入赛事报名费" v-model="userprice" auto-height />
			</view>
		</view>

		<!-- 奖金 -->
		<view class="section">
			<text class="section-title">冠军奖金</text>
			<view class="remark-input">
				<textarea placeholder="请输入冠军的奖金" v-model="honorprice" auto-height />
			</view>
		</view>

		<!-- 参赛说明 -->
		<view class="description-section">
			<text class="section-title">参赛说明</text>
			
			<view class="upload-area1">
				<view v-for="(img, index) in imageUrls" :key="index" class="uploaded-image-container1">
					<image :src="img" class="uploaded-image1"></image>
					<view class="delete-icon1" @click="removeImage(index)">×</view>
				</view>
					
				<view v-if="imageUrls.length < 2" class="upload-placeholder1" @click="chooseImage">
					<image src="/static/fabu/xiangji.png" class="camera-icon1"></image>
				</view>
			</view>
			
			<textarea class="description-input" placeholder="文字描述 (最多10000字)" v-model="param.description"
				maxlength="10000" @input="handleDescriptionInput" />
			<view class="word-count">{{ param.description.length }}/10000</view>
		</view>

		<!-- 提交按钮 -->
		<button class="submit-button" @click="submitOrder">提交</button>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: '',
				club: '',
				address: '',
				userprice: '',
				honorprice: '',
				addressDetail: '',
				date: this.getCurrentDate(),
				time: this.getCurrentTime(),
				dynamicAddressId: null, // 最终选的地址 ID
				selectedAddress: null, // 存储选中的地址
				// selectedAddress: null, // 地址
				addressList: [],
				imageUrls: [],
				param: {
					description: '',
				},
				description: '',
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 日期选择
			bindDateChange(e) {
				this.date = e.detail.value;
			},

			bindTimeChange(e) {
				this.time = e.detail.value;
			},

			// 时间范围
			getCurrentDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			getCurrentTime() {
				const date = new Date();
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${hours}:${minutes}`;
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			// 地址选择
			selectedAddress(item) {
				if (this.isSelectMode) {
					try {
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('acceptAddress', {
							id: item.id,
							fullAddress: `${item.province}${item.city}${item.district}${item.detail}`,
							detailAddress: item.detail,
							contactName: item.name,
							phone: item.phone,
							province: item.province,
							city: item.city,
							district: item.district
						});
						uni.navigateBack();
					} catch (error) {
						console.error(error);
					}
				} else {
					uni.setStorageSync('selectedAddress', item);
				}
			},

			setSelectedAddress(address) {
				this.selectedAddress = address;

				if (address) {
					this.selectedAddressDetail = address.detailAddress;
				}
			},

			openAddressSelector() {
				const selectedAddress = this.addressList[0];
				this.dynamicAddressId = selectedAddress.id;
			},

			goToAddressPicker() {
				uni.navigateTo({
					url: '/pages/my/address/index?select=true',
					events: {
						acceptAddress: (data) => {

							this.selectedAddress = {
								fullAddress: data.fullAddress,
								contactName: data.contactName,
								phone: data.phone,
								province: data.province,
								city: data.city,
								district: data.district
							};
							this.addressDetail = data.detailAddress;
							this.dynamicAddressId = data.id;
						}
					}
				})
			},

			handleDescriptionInput(e) {
				this.param.description = e.detail.value;
				this.descriptionLength = e.detail.value.length;
			},

			submitOrder() {
				const token = uni.getStorageSync('token');
				const data = {
					address_id: this.dynamicAddressId,
					expected_time: `${this.date} ${this.time}:00`,
					user_price: this.userprice,
				};
			},
		},
		onShow() {
			const app = getApp();
			if (app.globalData.selectedAddress) {
				const address = app.globalData.selectedAddress;
				this.region = [address.province, address.city, address.district];
				this.addressDetail = address.detail;
				// 清除全局存储的地址
				app.globalData.selectedAddress = null;
			}
		}

	}
</script>

<style>
	.container {
		padding: 20rpx;
		padding-bottom: 50rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.section {
		padding: 20rpx 2rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section:last-child {
		margin-bottom: 0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
		display: block;
		padding-left: 10rpx;
		border-left: 6rpx solid #fdad18;
		margin-left: 10rpx;
	}

	.remark-input {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
	}

	.remark-input textarea {
		width: 80%;
		min-height: 20rpx;
		font-size: 28rpx;
	}

	.time-picker,
	.address-picker {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
	}

	.picker {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.picker:last-child {
		border-bottom: none;
	}

	.arrow {
		color: #999;
	}

	.address-detail {
		margin-top: 15rpx;
	}

	.address-detail input {
		width: 95%;
		padding: 15rpx;
		background-color: #fff;
		border-radius: 8rpx;
		border: 1rpx solid #eee;
	}

	.address-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.contact-info {
		display: flex;
		gap: 20rpx;
		font-size: 24rpx;
		color: #666;
	}

	.placeholder {
		flex: 1;
		color: #999;
	}


	.description-section {
		margin-bottom: 30rpx;
		position: relative;
	}


	.description-section .description-input {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}


	.description-section .word-count {
		position: absolute;
		right: 20rpx;
		bottom: 10rpx;
		font-size: 24rpx;
		color: #999;
	}
	
	.upload-area {
	    width: 100%;
	    min-height: 200rpx;
	   /* background-color: #fff; */
	    border-radius: 10rpx;
	    display: flex;
	    flex-wrap: wrap;
	    padding: 10rpx;
	    box-sizing: border-box;
	}
	
	.uploaded-image-container {
	    width: 200rpx;
	    height: 200rpx;
	    margin: 10rpx;
	    position: relative;
	}
	
	.uploaded-image {
	    width: 100%;
	    height: 100%;
	    border-radius: 8rpx;
	}
	
	.delete-icon {
	    position: absolute;
	    top: -10rpx;
	    right: -10rpx;
	    width: 40rpx;
	    height: 40rpx;
	    background-color: #ff5500;
	    color: white;
	    border-radius: 50%;
	    text-align: center;
	    line-height: 40rpx;
	    font-size: 30rpx;
	}
	
	.upload-placeholder {
	    width: 200rpx;
	    height: 200rpx;
	    margin: 10rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #f9f9f9;
	    border-radius: 8rpx;
	}
	
	.camera-icon {
	    width: 80rpx;
	    height: 80rpx;
	    opacity: 0.5;
	}
	
	
	.upload-area1 {
	    width: 100%;
	    min-height: 200rpx;
	    background-color: #fff;
	    border-radius: 10rpx;
	    display: flex;
	    flex-wrap: wrap;
	    padding: 10rpx;
	    box-sizing: border-box;
	}
	
	.uploaded-image-container1 {
	    width: 200rpx;
	    height: 200rpx;
	    margin: 10rpx;
	    position: relative;
	}
	
	.uploaded-image1 {
	    width: 100%;
	    height: 100%;
	    border-radius: 8rpx;
	}
	
	.delete-icon1 {
	    position: absolute;
	    top: -10rpx;
	    right: -10rpx;
	    width: 40rpx;
	    height: 40rpx;
	    background-color: #ff5500;
	    color: white;
	    border-radius: 50%;
	    text-align: center;
	    line-height: 40rpx;
	    font-size: 30rpx;
	}
	
	.upload-placeholder1 {
	    width: 200rpx;
	    height: 200rpx;
	    margin: 10rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #f9f9f9;
	    border-radius: 8rpx;
	}
	
	.camera-icon1 {
	    width: 80rpx;
	    height: 80rpx;
	    opacity: 0.5;
	}
	
	.submit-button {
	    width: 90%;
	    height: 100rpx;
	    line-height: 100rpx;
	    padding: 0;
	    background: #fdad18;
	    color: white;
	    border: none;
	    border-radius: 12rpx;
	    font-size: 32rpx;
	    margin: 40rpx auto;
	}
</style>